<template>
	<view class="page-img-format-change photo-operator">
		<switch-tab v-if="topTabs.length" class="fixed-top-tab" :current="currentTab" :list="topTabs"
			@change="onTopTabChange"></switch-tab>
		<view class="top-container flex-center">
			<template v-if="photoUrl">
				<!-- 单张 -->
				<view class="photo-wrap">
					<text class="photo-witdh">{{ detailInfo.widthPixel }}px</text>
					<text class="photo-height">{{ detailInfo.heightPixel }}px</text>
					<image class="photo-image" :style="photoImageStyle" :src="photoUrl" mode="aspectFit"></image>
				</view>

				<view class="reupload-button custom-button white-btn-gray-text" @tap="onChoosePhoto">
					<u-button type="primary" shape="circle" text="重新上传"></u-button>
				</view>

			</template>
			<template v-else>
				<view class="upload-box" @tap="onChoosePhoto">
					<text class="add-icon">+</text>
					<view class="add-text">点击上传你的照片</view>
				</view>
			</template>

		</view>

		<view class="field-container">
			<view class="normal-title-16 flex-center">
				效果生成成功！
			</view>
			<view class="custom-button full-button" @tap="onSavePhoto">
				<u-button type="primary" shape="circle" text="保存照片"></u-button>
			</view>
			<!-- <view class="btn-double">
			<view class="custom-button full-button" @tap="onSavePhoto">
				<u-button type="primary" shape="circle" text="保存电子照"></u-button>
			</view>
			<view v-if="couldPrint" class="custom-button full-button" @tap="onPrintMail">
				<u-button type="primary" shape="circle" text="冲印邮寄"></u-button>
			</view>
		</view> -->
		</view>
	</view>
</template>
<script setup>
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive,
		computed,
	} from "vue";

	import {
		uploadFile,
		getImageInfo,
	} from '@/common/js/method';
	import useImageScale from '@/common/hooks/useImageScale.js';

	const userImage = ref(''); //用户上传的图片
	const processedImgUrl = ref(''); //处理后
	const processedImgUrls = ref({}); //缓存所有处理后的图片，下次不需要发接口重新处理
	const dataInfo = ref({});
	//顶部tab相关-start
	const topTabs = [];
	const currentTab = ref(0);
	// 切换显示的图片
	const photoUrl = computed(() => {
		return [userImage.value, processedImgUrl.value][currentTab.value];
	});
	const onTopTabChange = (index) => {
		currentTab.value = index;
	}
	//顶部tab相关-end

	// 缩放图片
	const photoImageStyle = useImageScale(imageInfo.value.widthPixel, imageInfo.value.heightPixel)


	const onChoosePhoto = async (imgSrc) => {
		userImage.value = await checkUploadImage();
		// 处理图片
		processed();
	}

	// 图像格式更换处理接口
	const processed = async (color) => {
		if (!userImage.value) {
			return;
		}
		uni.showLoading({
			title: '处理中'
		});
		const payload = {
			style: dataInfo.value.style,
			imageUrl: userImage.value,
		}
		const res = await uni.$request('/api/busi/photo/styleConvert', payload);
		processedImgUrl = res.photoUrl;
		// processedImgUrls.value = {
		// 	...processedImgUrls.value,
		// 	'当前模式': res.photoUrl,
		// };
		uni.hideLoading();
	}

	const onSavePhoto = () => {
		if (!userImage.value) return;
		const data = {
			...detailInfo.value,
			photoUrl: encodeURIComponent(processedImgUrl.value), //处理后的照片
		};
		uni.navigateTo({
			url: `/pages/make-photo/make-photo-save?type=${busiType.value}&data=${JSON.stringify(data)}`
		})

	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/photo-operator.scss";

	.page-img-format-change {

		// .top-container {
		// 	height: calc(100vh - 340rpx);
		// }
		
		// .field-container {
		// 	padding-top: 32rpx;
		// 	height: 340rpx;
		// }
	}
</style>